<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>易景大数据时空可视云平台</title>
  <link rel="stylesheet" th:href="@{/static/login2/css/style.css}">
  
  <script type="text/javascript" th:src="@{/static/login2/js/jQuery-2.1.4.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/login2/js/echarts.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/login2/js/echarts-liquidfill.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/login2/js/china.js}"></script>
  
<!--   <script src="js/jQuery-2.1.4.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script src="js/echarts-liquidfill.min.js"></script>
  <script src="js/china.js"></script> -->
</head>
<body>
  <div class="page">
    <div class="header">
      <div class="logo"><img src="../static/login2/images/logo.png" alt="智慧工地管控一体化大数据平台" /></div>
      <div class="header-title"><h2 data-text="智慧工地管控一体化大数据平台">智慧工地管控一体化大数据平台</h2></div>
      <div class="timekeeper">
        <i class="iconfont vmtp-time"></i>
        <span class="date" id="systemDate"></span>
        <span class="time" id="systemTime"></span>
        <span class="time" ><a href="../admin/Loginout"><font color="#00f2f4">退出</font></a></span>
      </div>
      
    </div>
    <div class="content">
        <div class="left"  style="position: absolute;z-index: 2000000;">
          <!-- 在建项目数量 -->
          <div class="dynamic" >
            <div class="title-type-1">
              <!-- <span class="tip">30天</span> -->
              <h3 class="title">在建项目数量</h3>
              <span class="bias"></span>              
            </div>
            <div class="consume-body" style="box-shadow: inset 0 0 480px #368194; transform: rotate(0deg);opacity: 1;">
              <div class="consume-echart" id="consume-bar"></div>
            </div>
          </div>
          <!-- 项目统计数据 -->
          <div class="running" style="margin-top:10px;">
            <div class="title-type-1">
              <h3 class="title">项目类别统计</h3>
              <span class="bias"></span>              
            </div>
            <div class="running-body" style="box-shadow: inset 0 0 480px #368194; transform: rotate(0deg);opacity: 1; height:240px;">
                <div class="dynamic-echart-pie" id="virtual-resource"></div>
            </div>
          </div>
          <!-- 项目类型统计 -->
          <div class="monitor" style="margin-top:10px;">
            <div class="title-type-1">
              <h3 class="title">项目汇总信息</h3>
              <span class="bias"></span>              
            </div>
            <div class="usage-panel-body usage-success" style="box-shadow: inset 0 0 480px #368194; transform: rotate(0deg);opacity:1;">
              <div class="usage-info">
                <ul class="usage-info-list">
                  <li class="usage-info-item usage-info-item-used">
                    本月新增
                    <span>26个</span>
                  </li>
                  <li class="usage-info-item">
                    本月完工
                    <span>11个</span>
                  </li>
                </ul>
              </div>
              <div class="usage-echart" style="display: flex;">
                <div class="usage-echart-liquidfill" id="liquidfill-ram" style="display:inline;"></div>
              </div>
              <div class="usage-echart" style="display: flex; margin-right: 50px;">
                  <div class="usage-echart-liquidfill" id="liquidfill-storager" style="display:inline;"></div>
                </div>
            </div>
            <!-- <div class="monitor-body" style="box-shadow: inset 0 0 480px #368194; transform: rotate(0deg);opacity:1;">
                <ul class="monitor-list">
                  <li class="monitor-item monitor-primary active">
                    <ul>
                      <li class="monitor-title">告警</li>
                      <li class="monitor-date">2019-12-16</li>
                      <li class="monitor-time">15:30:59</li>
                    </ul>
                    <p class="monitor-message"> 监控设备 <span class="monitor-name">编号：111110020230230342</span> 处于离线状态 <span class="monitor-percent"></span></p>
                  </li>
                  <li class="monitor-item monitor-warning">
                      <ul>
                        <li class="monitor-title">告警</li>
                        <li class="monitor-date">2019-12-16</li>
                        <li class="monitor-time">16:30:59</li>
                      </ul>
                      <p class="monitor-message"> 扬尘设备 <span class="monitor-name">编号：11123232423432435</span> 监测指标超标 <span class="monitor-percent">10%</span></p>
                  </li> 
                  <li class="monitor-item monitor-warning">
                      <ul>
                        <li class="monitor-title">告警</li>
                        <li class="monitor-date">2019-12-16</li>
                        <li class="monitor-time">19:30:59</li>
                      </ul>
                      <p class="monitor-message"> 扬尘设备 <span class="monitor-name">编号：111232324234345566</span> 监测指标超标 <span class="monitor-percent">50%</span></p>
                  </li> 
                </ul>
            </div> -->
          </div>
        </div>
        <!-- <div class="center"></div> -->
        <div class="right">
                    <!-- 地图 -->
                    <div class="map">
                            <iframe src="http://47.95.14.12:9092/jhcl/index.html"  id="easyglobemain" style="width: 100%;height: 100%;" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
                      </div>
                      <div class="trend">
                        <!-- 设备监测数据 -->
                        <div class="panel" style="width:540px;">
                            <div class="panel-title title-type-1">
                              <!-- <span class="tip">30天</span> -->
                              <h3 class="title">管控设备信息</h3>
                              <span class="bias"></span>
                            </div>
                            <div class="running-body" style="box-shadow: inset 0 0 480px #368194; transform: rotate(0deg);opacity: 1;">
                              <!-- 主机 -->
                              <div class="running-box">
                                <div class="running-box-title">
                                  监控设备: <span class="running-box-total">共200台</span>
                                </div>
                                <div class="running-box-state">
                                  <ul class="running-state-legend">
                                    <li class="running-working running-primary">
                                      运行中：<span>150</span>
                                    </li>
                                    <li class="running-off running-default">
                                      关机中：<span>20</span>
                                    </li>
                                    <li class="running-unkown running-warning">
                                      未知：<span>30</span>
                                    </li>
                                  </ul>
                                </div>
                                <div class="running-box-progress">
                                  <ul class="running-state-charts">
                                    <li class="running-working running-primary" style="width: 75%"></li>
                                    <li class="running-off running-default" style="width: 10%"></li>
                                    <li class="running-unkown running-warning" style="width: 15%"></li>
                                  </ul>
                                </div>
                              </div>
                              <!-- 云主机 -->
                              <div class="running-box">
                                <div class="running-box-title">
                                  扬尘设备: <span class="running-box-total">共120台</span>
                                </div>
                                <div class="running-box-state">
                                  <ul class="running-state-legend">
                                    <li class="running-working running-primary">
                                      运行中：<span>100</span>
                                    </li>
                                    <li class="running-off running-default">
                                      关机中：<span>12</span>
                                    </li>
                                    <li class="running-unkown running-warning">
                                      未知：<span>8</span>
                                    </li>
                                  </ul>
                                </div>
                                <div class="running-box-progress">
                                  <ul class="running-state-charts">
                                    <li class="running-working running-primary" style="width: 83.33%"></li>
                                    <li class="running-off running-default" style="width: 10%"></li>
                                    <li class="running-unkown running-warning" style="width: 6.67%"></li>
                                  </ul>
                                </div>
                              </div> 
                            </div>
                            <div class="monitor-body" style="box-shadow: inset 0 0 480px #368194; transform: rotate(0deg);opacity: 1;">
                                <ul class="monitor-list">
                                  <li class="monitor-item monitor-primary active">
                                    <ul>
                                      <li class="monitor-title">告警</li>
                                      <li class="monitor-date">2019-12-16</li>
                                      <li class="monitor-time">15:30:59</li>
                                    </ul>
                                    <p class="monitor-message"> 监控设备 <span class="monitor-name">编号：111110020230230342</span> 处于离线状态 <span class="monitor-percent"></span></p>
                                  </li>
                                  <li class="monitor-item monitor-warning">
                                      <ul>
                                        <li class="monitor-title">告警</li>
                                        <li class="monitor-date">2019-12-16</li>
                                        <li class="monitor-time">16:30:59</li>
                                      </ul>
                                      <p class="monitor-message"> 扬尘设备 <span class="monitor-name">编号：11123232423432435</span> 监测指标超标 <span class="monitor-percent">10%</span></p>
                                  </li> 
                                  <li class="monitor-item monitor-warning">
                                      <ul>
                                        <li class="monitor-title">告警</li>
                                        <li class="monitor-date">2019-12-16</li>
                                        <li class="monitor-time">19:30:59</li>
                                      </ul>
                                      <p class="monitor-message"> 扬尘设备 <span class="monitor-name">编号：111232324234345566</span> 监测指标超标 <span class="monitor-percent">50%</span></p>
                                  </li> 
                                </ul>
                            </div>
                        </div>
                        <!-- 人员考勤数据 -->
                        <div class="panel">
                            <div class="panel-title title-type-1">
                              <!-- <span class="tip">30天</span> -->
                              <h3 class="title">劳务人员考勤</h3>
                              <span class="bias"></span>
                              <ul class="trend-legend">
                                <li class="trend-legend-cpu">应到</li>
                                <li class="trend-legend-ram">实到</li>
                              </ul>
                            </div>
                            <div class="panel-body" style="box-shadow: inset 0 0 480px #368194; transform: rotate(0deg);opacity:1;">
                              <div class="trend-echart" id="line-cpu-ram"></div>
                            </div>
                        </div>
                      </div>
        </div>
    </div>
  </div>
   <script type="text/javascript" th:src="@{/static/login2/js/echart_map.js}"></script>
   <script type="text/javascript" th:src="@{/static/login2/js/echart_line.js}"></script>
   <script type="text/javascript" th:src="@{/static/login2/js/echart_liquidFill.js}"></script>
   <script type="text/javascript" th:src="@{/static/login2/js/echart_pie.js}"></script>
   <script type="text/javascript" th:src="@{/static/login2/js/echart_bar_mixultra.js}"></script>
   
<!--   <script src="js/echart_map.js"></script>
  <script src="js/echart_line.js"></script>
  <script src="js/echart_liquidFill.js"></script>
  <script src="js/echart_pie.js"></script>
  <script src="js/echart_bar_mixultra.js"></script> -->
  <script>
    $(function(){
        // 系统时间
        function systemTime() {
            var date = new Date();
            var yy = date.getFullYear(),
                mm = date.getMonth() + 1,
                dd = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sc = date.getSeconds();
                
            mm.toString().length == 1 ? mm = '0' + mm : null;
            dd.toString().length == 1 ? dd = '0' + dd : null;
            hour.toString().length == 1 ? hour = '0' + hour : null;
            min.toString().length == 1 ? min = '0' + min : null;
            sc.toString().length == 1 ? sc = '0' + sc : null;

            var nowDate = yy + "-" + mm + "-" + dd;
            var nowTime = hour + ":" + min + ":" + sc;

            document.getElementById("systemDate").innerHTML = nowDate;
            document.getElementById("systemTime").innerHTML = nowTime;

            setTimeout(systemTime, 500);
        }
        systemTime();

        // 资源实时监控
        setInterval(insertask,5000);
        function insertask(){
          var $new_message  = $('<li class="monitor-item monitor-warning"><ul><li class="monitor-title">告警</li><li class="monitor-date">2019-12-16</li><li class="monitor-time">16:30:59</li></ul><p class="monitor-message"> 扬尘设备 <span class="monitor-name">编号：11123232423432435</span> 监测指标超标 <span class="monitor-percent">10%</span></p></li>');
          $('.monitor-list > li:first').before($new_message);
          setTimeout(function () {
            $new_message.removeClass("new").addClass("active").next().removeClass("active");
            }, 100);
          $('.monitor-list > li:last').remove();
        }
    });
  </script>
</body>
</html>